<template>
	<div class="news_view">
		<div class="news_swiper">
			<a-carousel
				:style="{
					width: '1280px',
					height: '300px'
				}"
				:auto-play="true"
				indicator-type="dot"
				show-arrow="hover"
			>
				<a-carousel-item v-for="image in images" :key="image">
					<img
						:src="image"
						:style="{
							width: '100%'
						}"
					/>
				</a-carousel-item>
			</a-carousel>
		</div>
		<a-layout class="news">
			<a-layout-content class="news_content">
				<div class="news_show">
					<div class="news_show_title">
						<h2>最新新闻</h2>
						<p>全部<icon-right /></p>
					</div>
					<div class="news_show_content">
						<news-show
							class="content_item"
							v-for="item in newNews.slice(0, 6)"
							:key="item"
							:item="item"
						>
						</news-show>
					</div>
				</div>
				<div class="news_list">
					<div class="news_list_title">
						<h2>新闻</h2>
						<p>全部<icon-right /></p>
					</div>
					<div class="news_list_content">
						<NewsList
							v-for="news in newNews"
							:key="news"
							:news="news"
						></NewsList>
					</div>
				</div>
			</a-layout-content>
			<a-layout-sider class="news_sider" :width="300">
				<rank-List
					v-if="newsList.length > 1"
					:rankList="newsList"
					:itemTitle="articleTitle"
					:detailsUrl="/newsDetails/"
				>
					<template #title>
						<h2 class="rank_title">热门资讯</h2>
					</template>
				</rank-List>
			</a-layout-sider>
		</a-layout>
	</div>
</template>

<script setup>
import newsApi from '../../api/news'
import NewsList from '../../components/newsList.vue'
const images = [
	'http://43.138.224.168:3000/static/upload/a2.jpg',
	'http://43.138.224.168:3000/static/upload/a2.jpg',
	'http://43.138.224.168:3000/static/upload/a2.jpg'
]
const newsList = ref([])
const articleTitle = ref('articleTitle')
newsApi.showRank().then(res => {
	newsList.value = res
})
// 按时间排序
const newNews = computed(() => {
	return newsList.value.sort((a, b) => {
		return b.articleTime - a.articleTime
	})
})
</script>

<style lang="scss" scoped>
.news_view {
	width: 1280px;
	min-width: 1280px;
	margin: 0 auto;
	.news {
		margin-top: var(--normal-distance);
	}
	.news_content {
		width: 100%;
		overflow: hidden;
		margin-right: var(--normal-distance);
		.news_show,
		.news_list {
			.news_show_title,
			.news_list_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: var(--normal-distance);
				color: var(--fc-bg);
				background-color: var(--ti-bg);
				border-left: var(--normal-sm-distance) solid var(--br-bg);
				& > p {
					margin-right: var(--normal-distance);
				}
				p:hover {
					color: brown;
					cursor: pointer;
				}
			}
			.news_show_content {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				gap: var(--normal-distance);
				padding: var(--normal-distance);
				background-color: var(--main-2-bg);
			}
			.news_list_content {
				display: flex;
				flex-direction: column;
				padding: var(--normal-distance);
				gap: var(--normal-distance);
				color: var(--fc-bg);
			}
		}
	}
	.news_sider {
		height: 550px;
		background-color: var(--main-2-bg);
		.rank_title {
			color: brown;
			margin-left: var(--normal-distance);
		}
	}
}
</style>
<style>
.arco-image-footer-extra {
	padding-left: 0;
}
</style>
